<template>
  <div class="pagination clearfix">
    <div class="left">
      <div class="item" v-if="total">共&nbsp;{{totalSize}}&nbsp;条</div>
      <div class="item" v-if="showPageSize">
        <div style="width: 60px;">每页</div>
        <el-select 
          v-model="currentPageSize"
          @change="selectPageSize"
          size="small"
          style="margin: 0 5px;">
          <el-option v-for="item in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <div>条</div>
      </div>
    </div>
    <div class="right">
      <div class="item item-page">
        <el-button v-if="goFirst" class="btn-arrow-left" @click="jumpFirstPage" :disabled="firstDisabled">
          <el-icon><DArrowLeft /></el-icon>
        </el-button>
        <el-pagination 
          :class="!goLast ? 'btn-next-border' : ''"
          layout="prev, pager, next" 
          :total="totalSize" 
          :page-size="pageSize" 
          @current-change="handleCurrentChange"
          :current-page="currentSelectPage">
        </el-pagination>
        <el-button v-if="goLast" class="btn-arrow-right" @click="jumpLastPage" :disabled="lastDisabled">
          <el-icon><DArrowRight /></el-icon>
        </el-button>
      </div>
      <div class="item" v-if="jump">
        <span>跳至</span>
        <el-input 
          v-model="jumpPage"
          @change="handleInputChange"
          :disabled="jumpDisabled"
          style="margin: 0 5px">
        </el-input>
        <span>页</span>
      </div>
      <div class="item" v-if=jump>
        <el-button :disabled="jumpDisabled" class="go-btn" @click="handleJumpPage">前往</el-button>
      </div>
    </div>
  </div>
  <!-- 在父组件中使用 -->
  <!-- <Pagination
    v-if="sdkCount > 0"
    :pageSize="pageSize"
    :currentPage="pageIndex"
    :totalSize="sdkCount"
    :pageSizeList="[10, 20, 30, 50]"
    @selectPageSize="onSizeChange"
    @handleCurrentChange="onCurrentChange"
  >
  </Pagination> -->
</template>
<script setup lang="ts">
  import { DArrowRight, DArrowLeft} from '@element-plus/icons-vue'
  import { ref, defineProps, watch, computed, onMounted } from 'vue'

  let currentPageSize = ref<number>(10)
  let currentSelectPage = ref<number>(1)
  let jumpPage = ref<number>(1)
  const props = defineProps({
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    totalSize: {
      type: Number,
      default: 0
    },
    total: {
      type: Boolean,
      default: true
    },
    showPageSize: {
      type: Boolean,
      default: true
    },
    goFirst: {
      type: Boolean,
      default: false
    },
    goLast: {
      type: Boolean,
      default: false
    },
    jump: {
      type: Boolean,
      default: true
    },
    pageSizeList: {
      type: Array,
      default: () => {
        return [10, 20, 30, 50]
      }
    }
  })

  const pageSizes = ref<Array<any>>([])
  const pageSizeListFormat = () => {
    pageSizes.value = props.pageSizeList.map(( item ) => {
      return { label: item, value: item }
    })
  }

  const firstDisabled = computed(() => {
    if (currentSelectPage.value === 1) {
      return true
    } else {
      return false
    }
  })
  const lastDisabled = computed(() => {
    if (currentSelectPage.value - 1 === (Math.floor(props.totalSize / currentPageSize.value))) {
      return true
    } else {
      return false
    }
  })
  const jumpDisabled = computed(() => {
    return props.totalSize / props.pageSize <= 1
  })

  const emit = defineEmits(['selectPageSize', 'handleCurrentChange'])
  const selectPageSize = (val) => {
    emit('selectPageSize', val)
    // 父组件中 selectPageSize 方法里注意将 pageIndex.value = 1
  }
  const handleJumpPage = () => {
    currentSelectPage.value = jumpPage.value
    handleCurrentChange(currentSelectPage.value)
  }
  const handleCurrentChange = (val) => {
    jumpPage.value = val
    currentSelectPage.value = val
    emit('handleCurrentChange', val)
  }
  const handleInputChange = (val) => {
    const inputPage = Number(val)
    const maxPageSize = Math.ceil(props.totalSize / currentPageSize.value)
    if (inputPage > 0 && inputPage <= maxPageSize) {
      jumpPage.value = inputPage
    } else if (inputPage > maxPageSize){
      jumpPage.value = maxPageSize
    } else {
      jumpPage.value = 1
    }
  }

  const jumpFirstPage = () => {
    currentSelectPage.value = 1
    handleCurrentChange(1)
  }
  const jumpLastPage = () => {
    currentSelectPage.value = Math.ceil(props.totalSize / currentPageSize.value)
    handleCurrentChange(currentSelectPage.value)
  }

  watch(() => props.currentPage, (newValue) => {
    currentSelectPage.value = newValue
    jumpPage.value = newValue
  })
  watch(() => props.pageSize, (newValue) => {
    currentPageSize.value = newValue
  })

  onMounted(() => {
    currentPageSize.value = props.pageSize
    jumpPage.value = props.currentPage
    currentSelectPage.value = props.currentPage
    pageSizeListFormat()
  })
</script>
<style lang='scss' scoped>
.pagination {
  color: #333;
  margin-top: 10px;
  font-size: 12px;
  .left {
    float: left;
    .item {
      display: flex;
      align-items: center;
      float: left;
      height: 28px;
      line-height: 28px;
      margin-right: 15px;
    }
    :deep(.el-input) {
      width: 80px;
      height: 28px;
      font-size: 12px;
      .el-input__inner {
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
      }
      .el-input__prefix {
        left: 35px;
        top: 0;
        font-size: 12px;
        color: #606266;
      }
    }
  }
  .right {
    float: right;
    display: flex;
    .el-button {
      width: 28px;
      height: 28px;
      padding: 0 !important;
    }
    .item {
      display: flex;
      align-items: center;
      margin-right: 5px;
      .el-button {
        &:first-child {
          border-right-width: 1px;
          border-radius: 2px 0 0 2px;
        }
        &:last-child {
          border-radius: 0 2px 2px 0;
          background: #fff;
          border-color: #d9d9d9;
          color: #333;
        }
      }
      &:first-child {
        display: flex;
      }
      &:last-child {
        margin-right: 0;
        .el-button {
          width: 50px;
          font-size: 12px;
          border-radius: 2px;
          border-right-width: 1px;
          &:hover {
            background: #fff;
            color: #337dff;
          }
        }
      }
      .go-btn {
        background-color: #FFFFFF;
        border-color: #337DFF;
        color: #337DFF;

        &.is-disabled {
          background-color: #F5F5F5;
          color: #bbbbbb;
          &:hover{
            background-color: #F5F5F5;
            color: #bbbbbb;
          }
        }

        &:not(.is-disabled) {
          &:hover{
            border-color: #337DFF;
          }
          &:active {
            border-color: #337DFF;
            color: #337DFF;
            background-color: #E1ECFF;
          }
        }
      }
      :deep(.el-input) {
        .el-input__inner {
          padding: 0 4px;
        }
      }
    }
    .item-page {
      .el-button {
        width: 28px !important;
      }
      .btn-arrow-left {
        border-right: none;
      }
      .btn-arrow-right {
        border-left: none;
        &:disabled {
          color: #bbb;
        }
      }
    }
    .el-input {
      width: 50px;
      height: 28px;
      padding: 0;
      border-radius: 2px;
      .el-input__inner {
        height: 28px;
        line-height: 28px;
        padding: 5px 9px;
        text-align: center;
        &:hover {
          background: #fff;
          color: #337dff;
        }
      }
    }
    .el-input.is-disabled .el-input__inner{
      background-color: #f5f5f5;
      color: #bbb;
    }
    :deep(.el-pagination) {
      margin-top: 0;
      padding: 0;
      .number,
      .more,
      .btn-prev,
      .btn-next
      {
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 0;
        border: 1px solid #d9d9d9;
        &:hover {
          background: #fff;
          color: #337dff;
        }
        &[disabled='disabled'] {
          background-color: #FFFFFF;
          color: #bbbbbb;
        }
        .el-icon {
          font-weight: normal;
        }
      }
      .btn-prev.is-first {
        border-right: none;
      }
      .el-pager {
        li{
          min-width: 28px;
          font-weight: normal;
          border: 1px solid #d9d9d9;
          border-right: none;
        }
        .number {
          &.is-active {
            border-right: 1px solid;
            border-color: #337dff;
            background: #fff;
            color: #337dff;
          }
        }
      }
    }
    .el-button {
      width: 28px;
      height: 28px;
      padding: 0 !important;
      background-color: #fff;
    }
    .btn-next-border {
      .btn-next{
        border-right-width: 1px
      }
    }
  }
}
</style>
